﻿@{
    Layout = null;
    @*ViewData["Title"] = "Index";
        Layout = "~/Views/Shared/_Layout1.cshtml";*@
}
<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>商品管理</title>
    <script src="~/vue/vue.js"></script>
    <script src="~/element-ui/index.js"></script>
    <link href="~/element-ui/theme-chalk/index.css" rel="stylesheet" />
    <script src="~/vue/vue-resource.js"></script>
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <style>
        .el-header {
            background-color: #B3C0D1;
            color: #333;
            line-height: 60px;
        }

        .el-aside {
            color: #333;
        }
        /*去掉a标签的下划线*/
        a {
            color: black;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <el-container>
        <el-header>
            <el-header style="font-size: 50px;background-color:#545c64">
                <el-menu mode="horizontal" background-color="#545c64">
                    <el-menu-item>
                        <img src="~/Img/silvon-inc-20-240.png" style="width:50px;height:50px" />
                        <a style="font-size:30px;color:white">商城管理后台</a>
                    </el-menu-item>
                    <el-menu-item>
                        <a style="font-size:20px;color:white" href="/community/index">商品</a>
                    </el-menu-item>
                    <el-menu-item>
                        <a href="/Order/Index" style="font-size:20px;color:white">订单</a>
                    </el-menu-item>
                    <el-menu-item>
                        <a style="font-size:20px;color:white" href="/User/Index">用户</a>
                    </el-menu-item>
                    <el-menu-item>
                        <a style="font-size:20px;color:white" href="/Promotions/Index">促销</a>
                    </el-menu-item>
                    <el-menu-item>
                        <a style="font-size:20px;color:white" href="/MvcController1/Index1">权限</a>
                    </el-menu-item>
                </el-menu>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <el-menu>
                        <el-menu-item>
                            <span slot="title"><el-link :underline="false" href="/community/index">商品列表</el-link></span>
                        </el-menu-item>
                        <el-menu-item>
                            <span slot="title"><el-link :underline="false" href="/community/Add">添加商品</el-link></span>
                        </el-menu-item>
                        <el-menu-item>
                            <span slot="title"><el-link :underline="false" href="/community/show">商品分类</el-link></span>
                        </el-menu-item>
                    </el-menu>
                </el-aside>
                <el-main>
                    @* 查询表单 *@
                    <el-form :inline="true" :model="search" class="demo-form-inline">
                        <el-form-item label="关键字">
                            <el-input v-model="search.name" placeholder="商品名称/商品货号"></el-input>
                        </el-form-item>
                        <el-form-item label="品牌">
                            <el-select v-model="search.name1" placeholder="全部">
                                <el-option v-for="item in options"
                                           :key="item.value"
                                           :label="item.label"
                                           :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="是否上架">
                            <el-select v-model="search.state" placeholder="全部">
                                <el-option label="上架" value="1"> </el-option>
                                <el-option label="下架" value="0"> </el-option>
                            </el-select>
                        </el-form-item>
                        <br />
                        <el-form-item label="分类">
                            <el-select v-model="search.name1" placeholder="全部">
                                <el-option v-for="item in options"
                                           :key="item.value"
                                           :label="item.label"
                                           :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="~">
                            <el-select v-model="search.name1" placeholder="全部">
                                <el-option v-for="item in options"
                                           :key="item.value"
                                           :label="item.label"
                                           :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <br />
                        <el-form-item>
                            <el-button type="primary" @@click="onSearch">查询</el-button>
                        </el-form-item>
                    </el-form>
                    <div>
                        @* 数据网格 *@
                        <el-table :data="tableData" border
                                  style="width: 100%">
                            <el-table-column type="selection"
                                             width="55"
                                             header-align="center"
                                             align="center">
                            </el-table-column>
                            <el-table-column label="序号"
                                             width="50"
                                             header-align="center"
                                             align="center">
                                <template slot-scope="scope">
                                    {{scope.$index+1}}
                                </template>
                            </el-table-column>
                            <el-table-column prop="commodityImg"
                                             label="商品图片"
                                             width="180"
                                             header-align="center"
                                             align="center">
                                <template slot-scope="scope">
                                    <img :src="scope.row.commodityImg" style="width:100px;height:50px;" />
                                    @*<img :src="/Img/5 (2).jpg" style="width:100px;height:50px;" />*@
                                </template>
                            </el-table-column>
                            <el-table-column prop="commodityName"
                                             label="商品名称"
                                             width="180"
                                             header-align="center"
                                             align="center">
                            </el-table-column>
                            <el-table-column prop="articleNumber"
                                             label="货号"
                                             width="100"
                                             header-align="center"
                                             align="center">
                            </el-table-column>
                            <el-table-column prop="commodityPrice"
                                             label="价格"
                                             width="120"
                                             header-align="center"
                                             align="center">
                            </el-table-column>
                            <el-table-column prop="tN1"
                                             label="分类"
                                             width="120"
                                             header-align="center"
                                             align="center">
                            </el-table-column>
                            <el-table-column prop="brand"
                                             label="品牌"
                                             width="80"
                                             header-align="center"
                                             align="center">
                            </el-table-column>
                            <el-table-column prop="commodityState"
                                             label="是否上架"
                                             width="100"
                                             header-align="center"
                                             align="center">
                                <template scope="scope">
                                    <el-switch on-color="#5B7BFA"
                                               off-color="#dadde5"
                                               v-model="scope.row.commodityState">
                                    </el-switch>
                                </template>
                            </el-table-column>
                            <el-table-column prop="ssalealesVolume"
                                             label="销量"
                                             width="50"
                                             header-align="center"
                                             align="center">
                            </el-table-column>
                            <el-table-column label="操作"
                                             width="180"
                                             header-align="center"
                                             align="center">
                                <template slot-scope="scope">
                                    <el-button size="mini"
                                               type="primary"
                                               @@click="Edit(scope.$index, scope.row)">修改</el-button>
                                    <el-button size="mini"
                                               type="danger"
                                               v-on:click="Delete(scope.$index, scope.row)">删除</el-button>
                                </template>
                            </el-table-column>

                            </el-table>
                            @* 分页 *@

                            <el-pagination class="mpage" :model="current" ref="current"
                                           background
                                           @@size-change="handleSizeChange" @*修改显示条数触发事件*@
                                           @@current-change="page" @*换页触发事件*@
                                           :current-page="current.currentPage"
                                           :page-sizes="[2, 4, 6]"
                                           :page-size="current.pageSize"
                                           layout="total, sizes, prev, pager, next, jumper"
                                           :total="current.total">
                            </el-pagination>
                        </div>
                        @* 添加的弹框 *@
                        <el-dialog title="添加商品" :visible.sync="addShow" width="600px">
                            <el-form :model="addForm" label-width="80px">
                                <el-form-item label="商品名称">
                                    <el-input v-model="addForm.commodityName" :style="{width:showWidth}"></el-input>
                                </el-form-item>
                                <el-form-item label="商品货号">
                                    <el-input v-model="addForm.articleNumber" :style="{width:showWidth}"></el-input>
                                </el-form-item>
                                <el-form-item label="价格">
                                    <el-input v-model="addForm.commodityPrice" :style="{width:showWidth}"></el-input>
                                </el-form-item>
                                <el-form-item label="是否包邮">
                                    <el-input v-model="addForm.bagEmail" :style="{width:showWidth}"></el-input>
                                    <template scope="scope">
                                        <el-switch on-color="#5B7BFA"
                                                   off-color="#dadde5"
                                                   v-model="scope.row.commodityState">
                                        </el-switch>
                                    </template>
                                </el-form-item>
                                <el-form-item label="时间">
                                    <el-date-picker v-model="addForm.createTime"
                                                    type="date"
                                                    :style="{width:showWidth}"
                                                    format="yyyy 年 MM 月 dd 日"
                                                    value-format="yyyy-MM-dd"
                                                    placeholder="时间">
                                    </el-date-picker>
                                </el-form-item>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @@click="addShow = false">取 消</el-button>
                                <el-button type="primary" v-on:click="addData">确 定</el-button>
                            </div>
                        </el-dialog>
                        @*编辑商品*@
                        <el-dialog title="编辑商品" :visible.sync="editShow" width="600px">
                            <el-form :model="editForm" label-width="80px">
                                <el-form-item label="商品名称">
                                    <el-input v-model="editForm.commodityName" :style="{width:showWidth}"></el-input>
                                </el-form-item>
                                <el-form-item label="商品货号">
                                    <el-input v-model="editForm.articleNumber" :style="{width:showWidth}"></el-input>
                                </el-form-item>
                                <el-form-item label="价格">
                                    <el-input v-model="editForm.commodityPrice" :style="{width:showWidth}"></el-input>
                                </el-form-item>
                                <el-form-item label="是否包邮">
                                    <el-input v-model="editForm.bagEmail" :style="{width:showWidth}"></el-input>
                                    <template scope="scope">
                                        <el-switch on-color="#5B7BFA"
                                                   off-color="#dadde5"
                                                   v-model="scope.row.commodityState">
                                        </el-switch>
                                    </template>
                                </el-form-item>
                                <el-form-item label="时间">
                                    <el-date-picker v-model="editForm.createTime"
                                                    type="date"
                                                    :style="{width:showWidth}"
                                                    format="yyyy 年 MM 月 dd 日"
                                                    value-format="yyyy-MM-dd"
                                                    placeholder="时间">
                                    </el-date-picker>
                                </el-form-item>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @@click="editShow = false">取 消</el-button>
                                <el-button type="primary" v-on:click="editData">确 定</el-button>
                            </div>
                        </el-dialog>
                    </div>

                </el-main>
            </el-container>
    </el-container>
    <script>
          new Vue({
              el: '#usercomm',
              data() {
                  return {
                      //数据网格
                      tableData: [],
                      //查询
                      search: {
                          name: '',
                          state: ''
                      },
                      //添加表单
                      addForm: {
                          name: '',
                          nickName: '',
                          email: '',
                          remark: '',
                          createTime: '',
                      },
                      //编辑表单
                      editForm: {
                          id: '',
                          commodityName: '',
                          articleNumber: '',
                          commodityPrice: '',
                          bagEmail: '',
                          createTime: '',
                      },
                      //弹框是否显示
                      addShow: false,
                      editShow: false,
                      //表单input宽
                      showWidth: '300px',
                      //分页
                      current: {
                          //默认
                          currentPage: 1,//页码
                          total: 0,//总共多少条
                          pageSize: 2//每页多少条数据
                      },
                  }
              },
              created: function () {
                  this.getData();
              },
              methods: {
                  //显示
                  getData() {
                      var url = 'http://localhost:62874/api/Community/Index';
                      this.$http.get(url, {params: { name: this.search.name } }).then(function (result) {
                          this.tableData = result.body.data;
                          this.current.total = result.body.total;
                      });
                  },
                  //添加数据
                  addData() {
                      var url = 'http://localhost:62874/api/Community/Add';
                      var data = JSON.stringify(this.addForm);
                      this.$http.post(url, data, { emulateJSON: true }).then(function (result) {
                          if (result.body > 0) {
                              this.addShow = false;
                              this.$message.success("添加成功!");
                              this.getData();
                          } else {
                              this.$message.success("添加失败!");
                          }
                      });
                  },
                  //修改数据
                  editData() {
                      var url = 'http://localhost:62874/api/Community/Edit';
                      var data = JSON.stringify(this.editForm);
                      this.$http.put(url, data, { emulateJSON: true }).then(function (result) {
                          if (result.body > 0) {
                              this.$message.success("修改成功!");
                              this.editShow = false;
                              this.getData();
                          } else {
                              this.$message.success("修改失败!");
                          }
                      });
                  },
                  //点击添加触发的事件
                    add() {
                        this.addShow = true;
                    },
                  //点击修改触发的事件
                  Edit(idx, row) {
                      this.editShow = true;
                      this.editForm = row;
                  },
                  //删除
                  Delete(idx, row) {
                      var url = 'http://localhost:62874/api/Community/Del';
                      this.$http.delete(url, { params: { id: row.commodityId } }).then(function (result) {
                          if (result.body > 0) {
                              this.getData();
                              this.$message.success("删除成功!");
                          } else {
                              this.$message.success("删除失败!");
                          }
                      });
                  },
                  //查询
                  onSearch() {
                      this.getData();
                  },
                  page(value) {
                      this.current.currentPage = value;
                      this.getData();
                  },
                  handleSizeChange(val) {
                      this.current.pageSize = val;
                      this.getData();
                  },
                  //重置
                  onReset() {
                      this.search.name = null;
                      this.getData();
                  },
                  
              }
          });

    </script>



</body>
</html>